<template>
  <div class="feedback">
    <x-header :left-options="{showBack: true,backText:'意见反馈'}" class="headerBox"></x-header>
    <form>
        <div class="contents">
            <x-textarea :max="200" placeholder="请输入反馈内容，我们会为您更好的服务！"></x-textarea>
            <uploader :images="images" :upload-url="uploadUrl" size="small"></uploader>
        </div>
        <div class="btns">
            <x-button>提交反馈</x-button>
        </div>
    </form>
    <!-- 反馈结果 -->
    <div class='success'>
        <icon type="success" is-msg></icon>
        <div class='result'>反馈成功</div>
        <div class='tips'>感谢您对服务的关注与支持，我们会认真处理您的反馈，尽快修复和完善相关功能  </div>
    </div>   
  </div>
</template>

<script>
import { XHeader,XTextarea, XButton, Icon } from "vux";
import Uploader from "../components/Uploader";
export default {
  components: {
    XHeader,
    Uploader,
    XTextarea,
    XButton,
    Icon 
  },
  data() {
      return {
         images: [ { url: '/url/of/img.ong' }]
      }
  },
};
</script>

<style lang="less" scoped>
.feedback {
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      font-size: 30px;
    }
  }

  .contents {
    margin: 30px;
    border: 2px solid #eaeaea;
    border-radius: 10px;
  }
  .btns{
      padding: 20px 30px;
      /deep/.weui-btn_default {
            color: #fff;
            background-color: #3477E7;
        }
  }
    // 反馈结果
    .success{
    position: relative;
    top: 200px;
    left: 10%;
    text-align: center;
    width: 80%;
    display: none;
    .result{
            font-size: 36px;
            margin: 30px 0 15px;
        }
        .tips{
            font-size:30px;
            color:#7b7b7b;
        }
    }


}
</style>